<template>
  <div class="professional-team-container">
    <!-- 社区简介卡片 -->
    <div class="info-card">
      <div class="card-header">
        <i class="el-icon-location"></i>
        <span>金泉路社区概况</span>
      </div>
      <div class="info-content">
        <div class="info-stats">
          <div class="stat-box">
            <div class="stat-value">25</div>
            <div class="stat-label">小区楼院(个)</div>
          </div>
          <div class="stat-box">
            <div class="stat-value">8,920</div>
            <div class="stat-label">居民户数(户)</div>
          </div>
          <div class="stat-box">
            <div class="stat-value">19,272</div>
            <div class="stat-label">常住人口(人)</div>
          </div>
        </div>
        <div class="info-text-container" ref="textContainer" @mouseenter="stopTextScroll" @mouseleave="startTextScroll">
          <div class="info-text" :style="{ transform: `translateY(${textScrollTop}px)` }">
            金泉路社区成立于2015年10月，近年来，社区以区域化党建为引领，以网格化管理服务为抓手，以"同心360"社会治理服务体系、一厅五室为载体，推动社会治安、信访维稳、防邪禁毒、安全生产等各项任务有效落实。一是织密体系凝聚基层治理"联动合力"。坚持以党建引领城市基层治理为重点，深化"党旗红+网格蓝"，探索实践"一核多元、多网融合"的社会治理模式，织就以社区党委为核心，纵横贯通、执行有力、一抓到底的基层治理工作体系。二是拓展品牌激发基层治理"共建活力"。针对辖区"三多一少"的特点，建立"未来小站"创业创享中心。持续深化拓展"同心360"社会治理品牌，让参与群体更多元，服务内容更精细、辐射范围更广泛。三是强化措施筑牢基层治理"内外屏障"。以"四网融合"为依托，以"八无网格"创建为抓手，实行"八联"运行模式，推动各项工作有效落实，将不稳定因素消除在萌芽状态，有效降低各类案件的发生，为辖区内营造安全稳定的社会环境。
          </div>
        </div>
      </div>
    </div>

    <!-- 专业队伍卡片 -->
    <div class="team-card">
      <div class="card-header">
        <i class="el-icon-user"></i>
        <span>队伍建设</span>
      </div>
      <div class="team-grid">
        <div class="team-item">
          <div class="team-icon grid-icon"></div>
          <div class="team-info">
            <div class="team-name">网格员</div>
            <div class="team-count">15人</div>
            <div class="team-progress">
              <div class="progress-bar">
                <div class="progress" style="width: 100%"></div>
              </div>
              <span class="progress-text">覆盖率 100%</span>
            </div>
          </div>
        </div>
        <div class="team-item">
          <div class="team-icon police-icon"></div>
          <div class="team-info">
            <div class="team-name">网格警长</div>
            <div class="team-count">3人</div>
            <div class="team-progress">
              <div class="progress-bar">
                <div class="progress" style="width: 100%"></div>
              </div>
              <span class="progress-text">24小时在岗</span>
            </div>
          </div>
        </div>
        <div class="team-item">
          <div class="team-icon security-icon"></div>
          <div class="team-info">
            <div class="team-name">
              治保会义警
              <div class="team-subtitle">(门卫及学校幼儿园护校队)</div>
            </div>
            <div class="team-count">25人</div>
            <div class="team-progress">
              <div class="progress-bar">
                <div class="progress" style="width: 95%"></div>
              </div>
              <span class="progress-text">巡逻覆盖 95%</span>
            </div>
          </div>
        </div>
        <div class="team-item">
          <div class="team-icon mediation-icon"></div>
          <div class="team-info">
            <div class="team-name">专业调解员</div>
            <div class="team-count">12人</div>
            <div class="team-progress">
              <div class="progress-bar">
                <div class="progress" style="width: 98%"></div>
              </div>
              <span class="progress-text">调解成功率 98%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工作动态卡片 -->
    <div class="work-card">
      <div class="card-header">
        <i class="el-icon-data-line"></i>
        <span>工作动态</span>
      </div>
      <div class="work-list" ref="workList" @mouseenter="stopScroll" @mouseleave="startScroll">
        <div class="work-list-inner" :style="{ transform: `translateY(${scrollTop}px)` }">
          <div class="work-item" v-for="(item, index) in workItems" :key="index">
            <div class="work-time">
              <span class="time-text">{{ item.time }}</span>
              <div class="time-line"></div>
            </div>
            <div class="work-content">
              <div class="work-row" v-for="(row, rowIndex) in item.content" :key="rowIndex">
                <div class="work-info">
                  <i :class="row.icon"></i>
                  <span>{{ row.title }}</span>
                  <span class="highlight">{{ row.value }}</span>{{ row.unit }}
                </div>
                <span :class="['tag', row.tagType]">{{ row.tag }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfessionalTeam',
  data() {
    return {
      scrollTop: 0,
      textScrollTop: 0,
      scrollInterval: null,
      textScrollInterval: null,
      workItems: [
        {
          time: '今日',
          content: [
            {
              icon: 'el-icon-aim',
              title: '巡逻检查',
              value: '15',
              unit: '次',
              tag: '已完成',
              tagType: 'success'
            },
            {
              icon: 'el-icon-chat-line-square',
              title: '纠纷调解',
              value: '3',
              unit: '起',
              tag: '处理中',
              tagType: 'processing'
            },
            {
              icon: 'el-icon-house',
              title: '上门服务',
              value: '8',
              unit: '次',
              tag: '已完成',
              tagType: 'success'
            },
            {
              icon: 'el-icon-video-camera',
              title: '视频巡查',
              value: '24',
              unit: '小时',
              tag: '无异常',
              tagType: 'success'
            }
          ]
        },
        {
          time: '本周',
          content: [
            {
              icon: 'el-icon-document-checked',
              title: '纠纷化解',
              value: '8',
              unit: '起',
              tag: '已化解',
              tagType: 'success'
            },
            {
              icon: 'el-icon-warning-outline',
              title: '安全检查',
              value: '12',
              unit: '次',
              tag: '常规巡查',
              tagType: ''
            },
            {
              icon: 'el-icon-first-aid-kit',
              title: '医疗服务',
              value: '35',
              unit: '人次',
              tag: '上门服务',
              tagType: 'success'
            },
            {
              icon: 'el-icon-school',
              title: '校园护学',
              value: '10',
              unit: '次',
              tag: '护学岗',
              tagType: 'success'
            }
          ]
        },
        {
          time: '本月',
          content: [
            {
              icon: 'el-icon-search',
              title: '隐患排查',
              value: '128',
              unit: '次',
              tag: '整改中',
              tagType: 'warning'
            },
            {
              icon: 'el-icon-service',
              title: '便民服务',
              value: '45',
              unit: '次',
              tag: '满意度98%',
              tagType: 'success'
            },
            {
              icon: 'el-icon-bell',
              title: '安防预警',
              value: '15',
              unit: '起',
              tag: '已处置',
              tagType: 'success'
            },
            {
              icon: 'el-icon-guide',
              title: '志愿服务',
              value: '56',
              unit: '人次',
              tag: '服务中',
              tagType: 'processing'
            }
          ]
        },
        {
          time: '累计',
          content: [
            {
              icon: 'el-icon-data-analysis',
              title: '巡逻检查',
              value: '1,280',
              unit: '次',
              tag: '年度累计',
              tagType: ''
            },
            {
              icon: 'el-icon-finished',
              title: '矛盾纠纷',
              value: '156',
              unit: '起',
              tag: '化解率96%',
              tagType: 'success'
            },
            {
              icon: 'el-icon-medal',
              title: '便民服务',
              value: '520',
              unit: '次',
              tag: '满意度97%',
              tagType: 'success'
            },
            {
              icon: 'el-icon-coordinate',
              title: '网格服务',
              value: '2,150',
              unit: '次',
              tag: '覆盖率100%',
              tagType: 'success'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.startScroll()
    this.startTextScroll()
  },
  beforeDestroy() {
    this.clearScrollInterval()
    this.clearTextScrollInterval()
  },
  methods: {
    startScroll() {
      if (this.scrollInterval) return
      
      this.scrollInterval = setInterval(() => {
        const itemHeight = 100 // 每个工作项的高度（包含间距）
        const totalHeight = this.workItems.length * itemHeight
        
        if (Math.abs(this.scrollTop) >= totalHeight - itemHeight) {
          // 重置到顶部
          this.scrollTop = 0
        } else {
          // 向上滚动一个项目的高度
          this.scrollTop -= itemHeight
        }
      }, 3000) // 每3秒滚动一次
    },
    stopScroll() {
      this.clearScrollInterval()
    },
    clearScrollInterval() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval)
        this.scrollInterval = null
      }
    },
    startTextScroll() {
      if (this.textScrollInterval) return
      
      this.textScrollInterval = setInterval(() => {
        const container = this.$refs.textContainer
        const text = container.querySelector('.info-text')
        const containerHeight = container.clientHeight
        const textHeight = text.clientHeight
        
        if (Math.abs(this.textScrollTop) >= textHeight - containerHeight) {
          // 重置到顶部
          this.textScrollTop = 0
        } else {
          // 向上滚动一小段距离
          this.textScrollTop -= 1
        }
      }, 50) // 每50毫秒滚动一次，使滚动更平滑
    },
    stopTextScroll() {
      this.clearTextScrollInterval()
    },
    clearTextScrollInterval() {
      if (this.textScrollInterval) {
        clearInterval(this.textScrollInterval)
        this.textScrollInterval = null
      }
    }
  }
}
</script>

<style scoped>
.professional-team-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card, .team-card, .work-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 15px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.card-header {
  color: #00c6ff;
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.stat-box {
  flex: 1;
  text-align: center;
  background: rgba(0, 198, 255, 0.1);
  padding: 10px;
  border-radius: 4px;
}

.stat-value {
  font-size: 24px;
  color: #00c6ff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #7eb9ff;
}

.info-text-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 120px;
}

.info-text {
  position: absolute;
  width: 100%;
  transition: transform 0.05s linear;
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  text-indent: 2em;
}

.team-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 5px;
}

.team-item {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 4px;
  padding: 15px;
  display: flex;
  gap: 15px;
}

.team-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(0, 198, 255, 0.1);
  flex-shrink: 0;
}

.team-info {
  flex: 1;
}

.team-name {
  color: #7eb9ff;
  margin-bottom: 5px;
  line-height: 1.2;
}

.team-subtitle {
  font-size: 12px;
  color: rgba(126, 185, 255, 0.7);
  margin-top: 2px;
}

.team-count {
  color: #00c6ff;
  font-size: 20px;
  margin-bottom: 8px;
}

.team-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #00c6ff;
  border-radius: 2px;
}

.progress-text {
  font-size: 12px;
  color: #7eb9ff;
  white-space: nowrap;
}

.work-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 15px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 300px);
  overflow: hidden;
}

.work-list {
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 0 10px;
  height: 100%;
}

.work-list-inner {
  transition: transform 0.5s ease-in-out;
  position: relative;
  width: 100%;
}

.work-item {
  height: auto;
  min-height: 100px;
  margin-bottom: 15px;
  display: flex;
  gap: 15px;
  background: rgba(0, 24, 48, 0.6);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.work-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  position: relative;
}

.time-text {
  color: #00c6ff;
  font-size: 14px;
  font-weight: 500;
  z-index: 1;
  background: rgba(0, 24, 48, 0.8);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 198, 255, 0.3);
}

.time-line {
  position: absolute;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0, 198, 255, 0.5), rgba(0, 198, 255, 0.1));
}

.work-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 5px;
  overflow: visible;
}

.work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 24, 48, 0.6);
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s ease;
  min-height: 50px;
  flex-wrap: wrap;
}

.work-row:hover {
  background: rgba(0, 24, 48, 0.8);
  border-color: rgba(0, 198, 255, 0.3);
  transform: translateX(5px);
}

.work-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7eb9ff;
  font-size: 14px;
  min-width: 200px;
  max-width: calc(100% - 120px);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-info i {
  font-size: 18px;
  color: #00c6ff;
  background: rgba(0, 198, 255, 0.1);
  padding: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.work-info span {
  flex-shrink: 0;
}

.highlight {
  color: #00c6ff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 4px;
  font-family: DIN;
  flex-shrink: 0;
}

.tag {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 90px;
  text-align: center;
}

.tag.success {
  background: rgba(82, 196, 26, 0.15);
  color: #52c41a;
  border: 1px solid rgba(82, 196, 26, 0.3);
}

.tag.warning {
  background: rgba(250, 173, 20, 0.15);
  color: #faad14;
  border: 1px solid rgba(250, 173, 20, 0.3);
}

.tag.processing {
  background: rgba(24, 144, 255, 0.15);
  color: #1890ff;
  border: 1px solid rgba(24, 144, 255, 0.3);
}

/* 图标样式 */
.grid-icon {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

.police-icon {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

.security-icon {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

.mediation-icon {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

/* 滚动条样式 */
.work-list::-webkit-scrollbar {
  width: 6px;
}

.work-list::-webkit-scrollbar-track {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 3px;
}

.work-list::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.3);
  border-radius: 3px;
}

.work-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 198, 255, 0.5);
}
</style> 